import { FC, useEffect } from 'react';
import { IBrochureArticleModelState, IRouteComponentProps, Link, useDispatch, useSelector } from 'umi';
import styles from "./index.less";
import { Breadcrumb } from 'antd';
import ArticleListReadPage from "@/components/PublicList";
import { formatDateTime } from "@/utils/cycle";
import cls from "classnames";


const ArticleDetailPage: FC<IRouteComponentProps<{ id: string }>> = (props) => {
  const id = props.match.params.id;

  const dispatch = useDispatch();

  const { brochure_detail_list, brochure_article_list } = useSelector((state: { brochureEffect: IBrochureArticleModelState }) => state.brochureEffect);


  useEffect(() => {
    dispatch({
      type: 'brochureEffect/get_detail_list',
      payload: id
    });
    // 左侧列表 
    dispatch({
      type: 'brochureEffect/get_brochure_knowledge_list'
    });
    
  }, [id])

  return (
    <div className={styles.bdetail}>
      <div className={styles.bdetail_top}>
        <Breadcrumb>
          <Breadcrumb.Item>
           <a href="/brochure/knowledge">知识小册</a>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            {brochure_detail_list && brochure_detail_list.title}
          </Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className={styles.bdetail_top_two}>
        <h2>{brochure_detail_list && brochure_detail_list.title}</h2>
      </div>
      <div className={styles.bdetail_box}>
        
        <div className={styles.bdetail_box_left}>

          <div className={styles.bdetail_box_left_top}>

            <div className={styles.bdetail_box_left_top_img}>
              {/* 图片 */}
              <img src={brochure_detail_list && brochure_detail_list.cover} alt="" className={styles.fadeInFwd} />
            </div>
            <div className={styles.bdetail_box_left_top_list}>
              <div className={styles.focusInContractBck}><b>{brochure_detail_list && brochure_detail_list.title}</b></div>
              <div className={styles.focusInContractBck}><span>{brochure_detail_list && brochure_detail_list.summary}</span></div>
              <div className={styles.focusInContractBck}>
                <span>{brochure_detail_list && brochure_detail_list.views} 次阅读</span>
                &emsp;
                <span>{brochure_detail_list ? formatDateTime(new Date(brochure_detail_list.createAt!)) : null}</span>
              </div>
              <div>
                <button className={cls(styles.button,styles.shadowDropCenter,styles.shakeTop)}><a href={`/brochure/detail/${brochure_detail_list.id}`}>开始阅读</a></button>
              </div>
            </div>

            <ul className={styles.bdetail_box_left_top_navigation}>
              {/* 导航 */}
              {
                brochure_detail_list.children && brochure_detail_list.children!.map(item => {
                  return <li key={item.id} className={styles.trackingInExpand}>
                    <Link to={'/detail/' + item.id}>
                      <span>{item.title}</span> <b>{formatDateTime(new Date(item.createAt))}</b>
                    </Link>
                  </li>
                })
              }
            </ul>
          </div>
        </div>
        <div className={styles.bdetail_box_right}>
          <h2 className={styles.bdetail_box_right_top}>其他知识笔记</h2>
          {/* 右侧其他笔记 */}
          <ArticleListReadPage recommend={[]} articleLabel={[]} otherKnowledge={brochure_article_list.filter(item => item.id != id)} articlesLayer={[]}></ArticleListReadPage>
        </div>
      </div>

    </div>
  );
}

export default ArticleDetailPage;